<script setup lang='ts' name="elevator">
import { ElMessage } from 'element-plus'
import { computed } from 'vue'

const el = document.querySelector('.el-scrollbar__wrap')

const isTop = computed(() => {
    return !el?.scrollTop ? false : el.scrollTop > 50
})

function backTop() {
    let top = el!.scrollTop
    const raf = requestAnimationFrame(() => {
        el!.scrollTop = top -= 50
        if (top <= 0)
            cancelAnimationFrame(raf)
    })
}

function handleClick() {
    ElMessage.error('功能开发中,敬请期待！')
}
</script>

<template>
    <div class="divide divide-y divide-gray-2 bg-white flex flex-col fixed right-100 top-200 z-999">
        <!-- <div class="relative h-70 w-60 flex flex-col cursor-pointer items-center justify-center text-14 text-black transition-all hover:(bg-red text-white)">
            <div class="absolute left-0 top-4 z-100">
                <ElBadge :value="200"
                         :max="99"
                         type="primary"
                         :show-zero="false"
                />
            </div>

            <div i-mdi:cart
                 class="mb-4 mt-10 size-16"
            />

            <div>购物车</div>
        </div> -->

        <div class="text-14 text-black flex flex-col size-60 cursor-pointer justify-center items-center transition-all hover:(bg-red text-white)"
             @click="handleClick"
        >
            <div i-bx:support
                 class="mb-4 size-16"
            />

            <div>
                客服
            </div>
        </div>

        <div class="text-14 text-black flex flex-col size-60 cursor-pointer justify-center items-center transition-all hover:(bg-red text-white)"
             @click="handleClick"
        >
            <div i-ri:edit-fill
                 class="mb-4 size-16"
            />

            <div>反馈</div>
        </div>

        <div v-show="isTop"
             class="text-14 text-black flex flex-col size-60 cursor-pointer justify-center items-center transition-all hover:(bg-red text-white)"
             @click="backTop"
        >
            <div i-teenyicons:up-outline
                 class="mb-4 size-16"
            />

            <div>顶部</div>
        </div>
    </div>
</template>
